<template>
  <!-- 设置可以修改 完成标准、验证资料、第一责任人 的项目 -->
  <BaseModal
    title="信息调整权限"
    width="50%"
    :visible="visible"
    class="SetEditProject-container"
    @cancel="handleCancel"
  >
    <a-input-search class="mb10" v-model="searchText" placeholder="请搜索" @search="onSearch" />
    <div class="body-wrapper" v-loading="loadingState.isLoad">
      <a-tree v-if="dataList.length" :expandedKeys.sync="expandedKeys" :tree-data="dataList" :checkable="true" v-model="checkedKeys"></a-tree>
      <a-empty v-else />
    </div>
    <template v-slot:footer>
      <a-button @click="handleCancel">{{ dataList.length > 0 ? '取消' : '关闭' }}</a-button>
      <a-button v-if="dataList.length" :loading="loadingState.isSubmit" type="primary" @click="handleOk">提交</a-button>
    </template>
  </BaseModal>
</template>

<script>
import BaseModal from '@/components/BaseModal'
import { getProjectTree, updateProjectTree } from '@/api/adjust'
import { Empty } from 'ant-design-vue'

export default {
  name: 'SetEditProject',
  components: {
    BaseModal,
    [Empty.name]: Empty
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      expandedKeys: [],
      searchText: '', // 搜索关键字
      checkedKeys: [],
      dataList: [],
      loadingState: {
        isLoad: false,
        isSubmit: false
      }
    }
  },
  created() {
    this.getProjectTreeReq()
  },
  methods: {
    onSearch(value) {
      this.getProjectTreeReq(value)
    },
    /**
     * 提交
     */
    async handleOk() {
      try {
        if (this.loadingState.isSubmit) return
        this.loadingState.isSubmit = true
        const projectList = this.checkedKeys.filter((item) => item.indexOf('fake') === -1) // 将假key节点（分公司）筛选掉
        const delList = this.allCheckedKeys.filter(item => !projectList.includes(item)) // 计算此次查询之后，取消选中的节点列表
        const addList = projectList.filter(item => !this.allCheckedKeys.includes(item)) // 计算此次查询之后，新增选中的节点列表
        const allList =  [...new Set(this.cacheKeys.concat(addList))] // 将空条件查询时缓存的所有选中节点和此次新增选中的节点合并，去重
        const realList = []
        // 遍历合并后的节点列表，将那些在此次查询被取消选中的节点筛选出去，获取真正的选中列表
        allList.forEach(item => {
          if(!delList.includes(item)) {
            realList.push(item)
          }
        })
        await updateProjectTree(realList)
        this.$message.success('提交成功')
        this.handleCancel()
      } catch (e) {
        console.error(e)
      }
      this.loadingState.isSubmit = false
    },
    /**
     * 获取分公司项目的树结构（根据当前岗位权限）
     */
    async getProjectTreeReq(val) {
      try {
        this.loadingState.isLoad = true
        const res = await getProjectTree({
          projectName: val || ''
        })
        const target = res.data || {}
        const list = []
        const defaultCheckedKeys = []
        Object.keys(target).forEach((key) => {
          list.push({
            treeLevel: 1,
            title: key,
            key: `fake-${key}`, // 分公司节点使用假key
            children: (target[key] || []).map((item) => {
              // 筛选出已经选中的项目节点
              if (item.isUpdateOther) {
                defaultCheckedKeys.push(item.projectId)
              }
              return {
                ...item,
                title: item.projectName,
                key: item.projectId,
                children: [],
                treeLevel: 2
              }
            })
          })
        })
        this.checkedKeys = defaultCheckedKeys
        this.allCheckedKeys = JSON.parse(JSON.stringify(defaultCheckedKeys)) // 记录一下本次查询之后，选中的节点列表，用于提交时比较得出哪些节点是新增选中，哪些节点是取消选中
        if(!val) {
          // 非搜索情况下，这里存储有哪些被选中的项目，在计划调整页面可以根据该数据判断是否可修改
          this.setKeys(defaultCheckedKeys)
          // 缓存空条件下被选中的节点列表，用于提交时作为基数据
          this.cacheKeys = JSON.parse(JSON.stringify(defaultCheckedKeys))
        }
        this.dataList = list
      } catch (e) {
        console.error(e)
      }
      this.loadingState.isLoad = false
    },
    setKeys(keys) {
      sessionStorage.setItem('allowProjectList', JSON.stringify(keys))
    },
    handleCancel() {
      this.$emit('update:visible', false)
      this.searchText = ''
      this.expandedKeys = []
      this.getProjectTreeReq()
    }
  }
}
</script>

<style lang="less" scoped>
.body-wrapper {
  max-height: calc(var(--heightVh) * 0.5);
  overflow: auto;
}
</style>